$.fn.banner = function(items, ops){
    "use strict";
    const that = this;

    // 默认参数的处理
    let {btn=true, list=true, autoPlay=true, delayTime=2000, moveTime=200, index=0, reverse=false} = ops || {};
    // console.log(this);
    // console.log(items)

    // 左右按钮时，要离开的图片的索引
    let prev;

    // 创建图片结构
    let str = "";
    items.forEach(val => {
        str += `<img src="${val.src}" alt="${val.name}" title="${val.title}">`
    });
    // 创建图片容器，将图片结构放入容器
    const imgs = $(`<div class="imgbox">${str}</div>`).appendTo(this).children("img");
    // 设置所有图片都在容器右侧，根据参数决定哪张图片在可视区域内
    imgs.css("left", imgs.eq(0).width()).eq(index).css("left",0);

    // 根据参数决定是否添加按钮切换
    if(btn){
        // 创建左右按钮的页面结构，并插入到轮播图容器，同时绑定事件
        $(`<div class="btns"></div>`).append($("<input type='button' class='left' value='◀'>")).append($("<input type='button' class='right' value='▶'>")).appendTo(this).children(".left").click(leftClick).next(".right").click(rightClick);
    }
    function leftClick(){
        // 左按钮事件，计算索引
        if(index === 0){
            index = imgs.length-1;
            prev = 0;
        }else{
            index--;
            prev = index + 1;
        }
        // 开始运动
        move(prev, index, 1);
    }
    function rightClick(){
        // 右按钮事件，计算索引
        if(index === imgs.length-1){
            index = 0;
            prev = imgs.length-1
        }else{
            index++;
            prev = index - 1;
        }
        // 开始运动
        move(prev, index, -1);
    }
    // 运动功能
    function move(prev, now, direct){
        imgs.eq(prev).css({
            left:0
        }).stop().animate({
            left:imgs.eq(0).width() * direct
        }, moveTime).end().eq(now).css({
            left:-imgs.eq(0).width() * direct
        }).stop().animate({
            left:0
        }, moveTime)

        that.children(".list").children("span").eq(now).addClass("active").siblings().removeClass("active");
    }

    // 根据参数决定是否添加分页器切换
    if(list){
        // 创建并插入分页器的页面结构
        let str = "";
        items.forEach(()=>{
            str += `<span></span>`
        })
        const span = $("<div class='list'>"+ str +"</div>").appendTo(this).children();
        // 设置默认样式
        span.eq(index).addClass("active").siblings().removeClass("active");
        // 添加事件
        span.click(function(){
            // console.log(this, $(this).index());
            // 根据点击的按钮的索引和当前索引的大小，判断运动方向
            if($(this).index() > index){
                // console.log("左");
                // console.log(index, $(this).index())
                // 运动
                move(index, $(this).index(), -1);
            }
            if($(this).index() < index){
                // 运动
                move(index, $(this).index(), 1);
            }
            // 点击之后，将点击的索引设置给当前，以备下次使用
            index = $(this).index();
        })
    }

    // 根据参数决定是否需要自动切换
    if(autoPlay){
        // 开启计时器
        let t = setInterval(() => {
            // 根据方向，决定执行左或右按钮的事件处理函数
            if(reverse){
                leftClick();
            }else{
                rightClick();
            }
        }, delayTime);

        // 鼠标进入容器，停止计时器，鼠标离开容器，重新开启计时器
        this.hover(function(){
            clearInterval(t);
        },function(){
            t = setInterval(() => {
                if(reverse){
                    leftClick();
                }else{
                    rightClick();
                }
            }, delayTime);
        })
    }
}
